<script setup lang="ts">
import {RouterLink,RouterView} from "vue-router"
import {useRoute,useRouter} from "vue-router"
// 编程式导航
// 1、useRoute() 得到 路由信息  相当于this.$route   可以获取路由的path  name  query  params等
// 2、useRouter()  路由实例对象  this.$router()  可以实现路由跳转 
//    例如： .push() .go(1)前进   .go(-1)后退  .back()后退等价于.go(-1)
const route = useRoute()
const router = useRouter()


function toAbout(){
    // router.push('/about?id=1001')   字符串传参
    // 对象传参
    router.push({
        path:'/about',
        query:{
            id:1002
        }

    })
    console.log(route)

}


// 路由传参：
// 1、query传参   
//     路由注册时正常    匹配的是path  传的参数是以?拼接在url上
//     接收参数  route.query.id
       

// 2、params动态传参
//      路由注册时     path:'/cars/:count',
//      匹配的时路由的name属性 
//      route.params.count
// 注意：params传参 有时会出现页面刷新 数据丢失的问题  需要配合后端解决



function toCars(){
    // router.push('/cars/999')  //字符串
    // 对象传参
    router.push({
        name:'cars',
        params:{
            count:7777
        }

    })
}


</script>
<template>
   <div>
       首页组件
       <button @click="toAbout">跳转到about</button>
       <button @click="toCars">跳转到购物车</button>
       <div>
         <div class="aside">
             <RouterLink to="/home/goodssort">商品排行榜</RouterLink>
             
             <RouterLink to="/home/goodshot">商品热销榜</RouterLink>
         </div>
         <div class="main">
             <RouterView></RouterView>

         </div>
       </div>
   </div>
</template>
<style scoped>



</style>